<template>
    <view id="add">
        <view class="add">
            <view class="add-content" v-for="(item, index) in add" :key="index">
                <view class="title">{{ item.name }}{{ item.phone }}</view>
                <p class="add-text">{{ item.address }}</p>
                <view class="radio">
                    <uv-radio-group v-model="radiovalue">
                        <uv-radio :customStyle="{ margin: '8px' }" v-for="(item, index) in radiolist" :key="index"
                            :label="item.name" :name="item.name">
                        </uv-radio>
                    </uv-radio-group>
                    <view class="radio-content">
                        <view class="radio1" @click="address()">
                            <image src="/static/编辑.png" alt=""></image>
                            <p>编辑</p>
                        </view>
                        <view class="radio1">
                            <image src="/static/删除.png" alt=""></image>
                            <p>删除</p>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import { url } from '@climblee/uv-ui/libs/function/test';

export default {
    data() {
        return {
            add: [
                {
                    name: '王小米',
                    phone: '15566998898',
                    address: '山东省临沂市河东区芝麻墩街道沂河路与海关路交汇盛德桂园5号楼1单元603'
                },
                {
                    name: '王小米',
                    phone: '15566998898',
                    address: '山东省临沂市河东区芝麻墩街道沂河路与海关路交汇盛德桂园5号楼1单元603'
                }
            ],
            // 基本案列数据
            radiolist: [{
                name: '默认地址',
                disabled: false
            }]
            // uv-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
            // radiovalue: '苹果',
        }
    },
    methods: {
        address() {
            uni.navigateTo({
                url: '/pages/address/address'
            })
        }
    }
}
</script>
<style lang="scss">
page {
    background-color: #f5f5f5;
}

#add {
    width: 100%;

    .add {
        width: 90%;
        margin: auto;

        .add-content {
            margin: 30rpx 0px;
            background-color: #fff;
            border-radius: 10rpx;

            .title {
                padding: 30rpx;
                font-weight: bold;
            }

            .add-text {
                margin: 0rpx 30rpx;
                padding-bottom: 20rpx;
                font-size: 15px;
                border-bottom: 1px solid #ccc;
            }

            .radio {
                display: flex;
                justify-content: space-between;
                padding: 20rpx;

                .radio-content {
                    display: flex;
                    justify-content: space-between;
                    width: 50%;
                    height: 70rpx;

                    .radio1 {
                        display: flex;
                        width: 80%;
                        line-height: 70rpx;
                        font-size: 14px;

                        image {
                            width: 30%;
                            height: 40rpx;
                            margin-top: 14rpx;
                        }
                    }
                }
            }
        }
    }
}
</style>